<template>
  <el-config-provider :locale="zhCn">
    <router-view />
  </el-config-provider>
</template>

<script setup lang="ts">
import { onMounted, watch } from 'vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { useUserActivity } from '@/composables/useUserActivity'
import { useThemeStore } from '@/stores/theme'
import { useUserStore } from '@/stores/user'
import { getUserPreferences } from '@/api/profile'

// 初始化用户活动监听
// useUserActivity内部会检查用户登录状态，只有在用户登录时才会启用监听
useUserActivity()

// 初始化主题系统
const themeStore = useThemeStore()
const userStore = useUserStore()

// 加载用户主题偏好
const loadUserTheme = async () => {
  if (!userStore.isLoggedIn) return
  
  try {
    const response = await getUserPreferences()
    // 确保正确解析响应数据
    const preferences = response.data || response
    if (preferences?.theme) {
      themeStore.loadThemeFromPreferences(preferences.theme as 'light' | 'dark' | 'auto')
    }
  } catch (error) {
    // 如果接口不存在或失败，使用localStorage中的值
    console.log('加载用户主题偏好失败，使用本地存储的值:', error)
  }
}

onMounted(async () => {
  // 先初始化主题（从localStorage）
  themeStore.initTheme()
  
  // 如果用户已登录，加载用户偏好设置
  if (userStore.isLoggedIn) {
    await loadUserTheme()
  }
})

// 监听用户登录状态，登录后加载用户偏好
watch(() => userStore.isLoggedIn, async (isLoggedIn) => {
  if (isLoggedIn) {
    await loadUserTheme()
  }
})
</script>

<style>
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  /* 背景色由主题系统控制 */
}

#app {
  height: 100%;
  overflow: hidden;
  /* 背景色由主题系统控制 */
}
</style>